<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="backstage/common/head::head"></head>
<style>
    #content-container:before {
        background: none;
    }

    .lay-win {
        display: none;
    }

</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
    <div id="container" class="effect aside-float aside-bright mainnav-lg">

        <!--NAVBAR-->
        <!--===================================================-->
        <header id="navbar" th:replace="backstage/common/header::header"></header>
        <!--===================================================-->
        <!--END NAVBAR-->

        <div class="boxed">
            <div id="content-container">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <div id="page-content">
                    <button id="demo-btn-addrow" class="btn btn-purple" onclick="addAdv()"><i
                            class="demo-pli-add"></i> 增加</button>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th style="width:50px;"> 序号 </th>
                            <th> 广告位 </th>
                            <th> 广告链接 </th>
                            <th> 广告名称 </th>
                            <th> 广告图片 </th>
                            <th style="width:250px;"> 操作 </th>
                        </tr>
                        </thead>
                        <tbody id="user_table_body"></tbody>
                    </table>
                    <div id="page" style="align-content: center;text-align: center"></div>
                </div>
            </div>
            <nav id="mainnav-container" th:replace="backstage/common/left::left(9)"></nav>
        </div>
        <footer id="footer" th:replace="backstage/common/foot::footer"></footer>
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
    </div>
    <div class="lay-win">
        <form class="form-horizontal" action="/backstage/user/userAdd">
            <input type="hidden" id="input_id" name="id"/>
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_position">广告位</label>
                    <div class="col-sm-3">
                        <!--<input type="text" name="position" placeholder="广告位" class="form-control input-sm" id="input_position">-->
                        <select name="position" id="input_position">
                            <!--<option value="0">请选择</option>
                            <option value="19">右第一个</option>
                            <option value="20">右第二个</option>-->
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_url">广告链接</label>
                    <div class="col-sm-6">
                        <input type="text" name="url" id="input_url" placeholder="请输入广告链接" class="form-control input-sm" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_name">广告名称</label>
                    <div class="col-sm-6">
                        <input type="text" name="name" id="input_name" placeholder="请输入广告名称" class="form-control input-sm" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="input_img">广告图片</label>
                    <div class="col-sm-3">
                        <!--<input type="text" name="img" id="input_img" placeholder="请输入广告图片" class="form-control input-sm" >-->
                        <button type="button" class="layui-btn" id="shangchuan">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <img src="" id="img_img" alt="" class="backimg" width="100px" height="100px">
                        <input type="hidden" name="img" id="input_img">

                    </div>
                </div>
                <div class="form-group">
                    <p id="errMsg"></p>
                </div>
            </div>
        </form>
    </div>

</body>
<script th:inline="javascript">
    function page(totalCount,currPage) {
        layui.use(['laypage'], function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalCount //数据总数，从服务端得到
                , curr: currPage
                , limit: 10
                , jump: function (obj, first) {
                    //首次不执行
                    if (!first) {
                        var page = parseInt(obj.curr)-1;
                        advertisingPage(page,20);
                    }
                }
            });
        });
    }
</script>

<script>

    $(function () {

        layui.use('upload', function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#shangchuan' //绑定元素
                ,url: '/backstage/article/uploadImage' //上传接口
                ,done: function(res){
                    //上传完毕回调
                    console.log(res.data.src);
                    $("#input_img").val(res.data.src);
                    $("#img_img").attr("src",res.data.src);
                }
                ,error: function(){
                    //请求异常回调
                }
            });
        });

        advertisingPage(0,20);
        //广告位字典项
        findlables(8,'#input_position');
        renderForm();
    });
    function addAdv() {
        // itemList();
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn:['保存','取消'],
                yes:function () {
                   save(1,null);
                },end:function () {
                    qing();
                }
            })
        })
    }
    //修改用户
    function update(id) {
        findById(id);
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn:['保存','取消'],
                yes:function () {
                    save(0,id);
                },end:function () {
                    qing();
                }
            })
        })

    }
    function advertisingPage(pageIndex,pageSize){
        $.ajax({
            url: '/backstage/advertising/advertisingPage',
            type: 'get',
            data:{"pageIndex":pageIndex,"pageSize":pageSize},
            success: function (res) {
                var data ="";
                if(res!=null){
                    $.each(res.list,function(i,n) {
                        data += `<tr>
                           <td>${i+1}</td>
                           <td>${n.position}</td>
                           <td>${n.url}</td>
                           <td>${n.name}</td>
                           <td><img src="${url}${n.img}" width="100px" height="100px"></td>
                            <td>
                                    <button id="demo-btn-addrow" class="btn btn-info" onclick="update(${n.id})"> 修改</button>
                                    <button id="demo-btn-addrow" class="btn btn-danger" onclick="delfriendLink(${n.id})"> 删除</button>
                            </td>
                        </tr>`;
                    });

                    $("#user_table_body").html(data)
                    page(res.totalSize,res.pageIndex);
                }
            }
        });
    }

    /**
     * 保存用户
     * @param t 1新增 0修改
     * @returns {boolean}
     */
    function save (t,id) {
        var url='/backstage/advertising/addAdvertsing';
        if(t==0) {
            url = '/backstage/advertising/updateAdvertising';
        }
        var d = {};
        var vals = $(".form-horizontal").serializeArray();
        $.each(vals, function () {
            d[this.name] = this.value;
        });
        d.id=id;
        var data=JSON.stringify(d);
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            contentType: 'application/json',
            success: function (res) {
                //todo
                if(res.code!=0){
                    $("#errMsg").text(res.msg)
                    return;
                }
                location.href="/backstage/advertising";
            }
        });
        return false;
    }
    function delfriendLink( id) {
        $.ajax({
            url: '/backstage/advertising/delAdv',
            type: 'post',
            data: {"id":id},
            // contentType: 'application/json',
            success: function (res) {
                location.href="/backstage/advertising";
            }
        });
    }
    function findById(id) {
        $.ajax({
            url: '/backstage/advertising/findAdvById',
            type: 'post',
            data: {"id":id},
            // contentType: 'application/json',
            success: function (res) {
                $("#input_url").val(res.data.url);
                $("#input_name").val(res.data.name);
                $("#input_position").val(res.data.position);
                $("#input_img").val(res.data.img);
                $("#img_img").attr("src",url+res.data.img);
                $("#id").val(res.data.id);

            }
        });
    }

    function qing() {

        $("#input_url").val("");
        $("#input_name").val("");
        $("#input_position").val("");
        $("#input_img").val("");
        $("#img_img").attr("src","");
        $("#id").val("");
    }

</script>

</html>